深入浅出react和redux笔记总结

设计高质量的React组件

1.组件的生命周期

1.装载过程

• constructor
• getlnitialState：只在 React.createClass 方法创造的组件类才会用到
• getDefaultProps：只在 React.createClass 方法创造的组件类才会用到，用ES6的话，在构造函数中通过给 this.state 赋值完成状的初始化，通过给类属性（注意是类属性，而不是类的实例对象属性） defaultProps 赋值指定 props 初始值，达到的效果是完全一样的，
• componentWillMount：我们通常不用定义 componentWillMount 函数，顾名思义， componentWilJMount发生在“将要装载”的时候，这个时候没有任何渲染出来的结果，即使调用 this setState修改状态也不会引发重新绘制，一切都迟了 换句话说，所有可以在这个componentWillMount中做的事情，都可以提前到 constructor 中间去做，可以认为这个函数存在的主要目的就是为了和 componentDidMount 对称）（componentWillMount 可以在服务器端被调用，也可以在浏览器端被调用）
• render：render 函数应该是一个纯函数，完全根据 this.state this.props 来决定返回的结果，而且不要产生任何副作用，render 函数本身并不往DOM树上渲染或者装载内容，它只是返回JSX表示的对象，然后由 React 库来根据返回对象决定如何渲染，所以一个render里面有多个组件时，是所有的组件都转载完成（已经放在DOM树）后，才会依次调用各个组件的componentDidMount
• componentDidMount：只能在浏览器端被调用

2.更新过程

• componentWillReceiveProps：只要是父组件的 render 函数被调用，在 render 函数里面被渲染的子组件就会经历更新过程，不管父组件传给子组件的 props 有没有改变，都会触发子组件的 componentWillReceiveProps 函数，通过 this.setState 方法触发的更新过程不会调用这个函数，这是因为这个函数适合根据新的 props 值（也就是参数 nextProps ）来计算出是不是要更新内部状态 state。
• shouldComponentUpdate：在更新过程中， React 库首先调用 shouldComponentUpdate 函数，如果这个函数返回true ，那就会继续更新过程，接下来调用 render 函数；反之，如果得到 false ，那就立刻停止更新过程，也就不会引发后续的渲染了，不会调用render（下面的3个都不调用）
• componentWillUpdate：
• render
• componentDidUpdate：可以利用 componentDidMount 函数执行其他 UI 库的代码，比如 jQuery 代码 React 组件被更新时，原有的内容被重新绘制，这时候就需要在 componentDidUpdate 函数再次调用 jQuery 代码

3.卸载过程

• componentWillUnmount：在componentDidMount 中用非 React 的方法创造了一些 DOM 元素，如果撒手不管可能会造成内存泄露，那就需要在 componentWillUnmount 中把这些创造的 DOM 元素清理掉

2.小细节

• PropTypes 提供一系列验证器，可用于确保组件接收到的数据类型是有效的，在开发过程中避免犯错，但是在发布产品代码时，用一种自动的方式将propTypes 去掉，这样最终部署到产品环境的代码就会更优，现有的 babel-react-optimize 就具有这个功能，可以通过npm 安装，但是应该确保只在发布产品代码时使用它
• 组件向外传递数据是调用父组件的方法来改变父组件的state值。

从Flux到Redux

1.Flux 55